<template>
  <div id="index-box">
    <!-- 火车票查询 -->
<el-container>
  <el-header >
<i class="el-icon-bell"></i>
<span class="infos">今天是 01月05日 星期日 电话及网络可预订02月03日车票，可预约预订03月04日车票</span>
<el-link  type="primary" class="order-train"><i class="el-icon-s-order"></i>火车票订单  ></el-link>
  </el-header>
  <!-- 车票查询 -->
  <el-container >
    <el-aside width="500px">
      <div class="smt">    
        <h3> <i class="icon-train"></i>火车票查询</h3>
      </div>
      <br>
<!-- 火车票查询 -->
  <!-- 换 -->
  <span class="line-zs "></span>
<svg class="icon-huan" aria-hidden="true">
  <use xlink:href="#icon-huan"></use>
</svg>


    <el-form :model="Trainform" :rules="rules" ref="Trainform" label-width="110px" >
      <!-- 出发城市 -->
     <el-form-item label="出发城市" prop="formStation">
    <el-input v-model="Trainform.formStation" placeholder="城市名/车站名" style="width:280px" clearable></el-input>
  </el-form-item>
  
  <!-- 到达城市 -->
   <el-form-item label="到达城市" prop="toStation">
    <el-input v-model="Trainform.toStation"placeholder="城市名/车站名"  style="width:280px" clearable></el-input>
  </el-form-item>
    <!-- 出发日期 -->
     <el-form-item label="出发日期" prop="formDate">
    <el-date-picker style="width:280px"
      v-model="Trainform.formDate"
      align="right"
      type="date"
      placeholder="选择出发日期"
      :picker-options="pickerOptions">
      
    </el-date-picker>
  </el-form-item>

<el-form-item >
    <el-checkbox-group v-model="Trainform.checked">
      <el-checkbox >仅搜高铁和动车</el-checkbox>
      <el-button type="primary" @click="submitForm('Trainform')">立即搜索</el-button>
    </el-checkbox-group>
  </el-form-item>

    </el-form>

    </el-aside>
    <!-- 广告图片轮播 -->
    <el-main>

 <el-carousel height="350px">
      <el-carousel-item v-for="Ad in imagesbox" :key="Ad.id">
        <!-- <h3 class="small">{{ Ad }}</h3> -->
        <img :src="Ad.idView" class="image">
      </el-carousel-item>
    </el-carousel>

    </el-main>
  </el-container>
</el-container>
 <!-- 热门推荐 -->
<el-container>
  <el-header>
<!-- <svg class="icon-remen" aria-hidden="true">
  <use xlink:href="#icon-remen"></use>
</svg> -->
<div class="rmtj"><span class="iconfont icon-remen" ></span>热门推荐</div>
  </el-header>
  <el-main>
 <el-tabs v-model="hotRoute"  @tab-click="hotRouteClick"  >
<el-tab-pane v-for="cityTab in cityRouteTabs" :label="cityTab.city" :key="cityTab.name" :name="cityTab.name" >
          <ul class="hot-stations">
            <li v-for="city in cityRoute" >
              <el-link href="#">
            <div class="station-name">
                <span>{{city.formCity}}</span>
                <i class="iconfont icon-ttk_index_pointerx1"></i>
                <span>{{city.toCity}}</span>
            </div>
            <p class="station-price">
                <span>￥</span>
                <span class="price-num">{{city.routePrice}}</span>
                <span>元</span>
            </p>
            </el-link>
            </li>
          </ul>
  </el-tab-pane>  
  </el-tabs>

  </el-main>
</el-container>
 <!-- 常见问题 -->
<el-container>
  <el-header>
    <div class="cjwt"  ><span class="iconfont icon-changjianwenti" ></span>常见问题</div>
  </el-header>
  <el-main>
    <!--常见问题-->
      <div class="issue-content">
          <ul>
             <li class="single-issue" v-for="problem in issueContent">
              <h5 class="issue-title">{{problem.title}}</h5>
              <div class="issue-detail">{{problem.detail}}</div>
              <a target="_blank" href="#" class="more-issue">{{problem.more}}</a>
             </li>
          </ul>
      </div>

  </el-main>
</el-container>
  </div>

</template>

<script>

export default {
  name: 'index',
  components: {},
  data() {
    return {
      //广告轮播图片
      imagesbox:[
        {id:0,idView:require("../../assets/images/img1.jpg")},
        {id:1,idView:require("../../assets/images/img2.jpg")},
        {id:2,idView:require("../../assets/images/img1.jpg")},
        {id:3,idView:require("../../assets/images/img2.jpg")}
      ],
      //常见问题
      issueContent:[
        {
          title:'身份验证',
          detail:'2014年新规：从未在网络购票的用户，请先携身份证去火车站专门窗口核验身份证信息，核验通过后才能网上购票',
          more:'更多>>'
        },
        {
          title:'取票方式',
          detail:'若您使用二代居民身份证进行的预订，可凭预订时所使用的乘车人有效身份证件原件到车站售票窗口、铁路客票代售点或车站自动售票机上办理换票.....',
          more:'更多>>'
        },
        {
          title:'如何退票',
          detail:'预订火车票成功后，如未取票且离产品内显示的火车发车时间大于1小时30分钟，您可在线申请退票。预订成功后，如已取票或离 产品内显示的火车......',
          more:'更多>>'
        },
        {
          title:'如何改签',
          detail:'预订成功后，如需办理订单内的车票改签，可凭购票证件原件到车站窗口办理或登录京东原预订账户，在订单详情中申请在线改签，在线改签服务时......',
          more:'更多>>'
        }
      ],
      // 点击选择tabs城市数据
      cityRoutes:[
        {formCity:'北京',toCity:'南宁',routePrice:268.5},
        {formCity:'北京',toCity:'广州',routePrice:251.0},
        {formCity:'北京',toCity:'厦门',routePrice:243.0},
        {formCity:'北京',toCity:'上海',routePrice:156.5},
        {formCity:'北京',toCity:'杭州',routePrice:189.5},
        {formCity:'北京',toCity:'武汉',routePrice:152.5},
        {formCity:'北京',toCity:'长沙',routePrice:189.5},
        {formCity:'北京',toCity:'合肥',routePrice:138.5},
        {formCity:'北京',toCity:'东莞',routePrice:251.0},
        {formCity:'北京',toCity:'深圳',routePrice:254.5},
        {formCity:'北京',toCity:'昆明',routePrice:302.5},
        {formCity:'北京',toCity:'南京',routePrice:130.5},

        {formCity:'上海',toCity:'天津',routePrice:143.5},
        {formCity:'上海',toCity:'深圳',routePrice:234.0},
        {formCity:'上海',toCity:'东莞',routePrice:217.0},
        {formCity:'上海',toCity:'苏州',routePrice:12.5},
        {formCity:'上海',toCity:'贵阳',routePrice:229.0},
        {formCity:'上海',toCity:'厦门',routePrice:163.5},
        {formCity:'上海',toCity:'福州',routePrice:128.5},
        {formCity:'上海',toCity:'广州',routePrice:189.5},
        {formCity:'上海',toCity:'合肥',routePrice:78.0},
        {formCity:'上海',toCity:'重庆',routePrice:224.0},
        {formCity:'上海',toCity:'武汉',routePrice:135.5},
        {formCity:'上海',toCity:'南宁',routePrice:224.5},

         {formCity:'广州',toCity:'济南',routePrice:224.0},
        {formCity:'广州',toCity:'厦门',routePrice:102.0},
        {formCity:'广州',toCity:'南京',routePrice:206.0},
        {formCity:'广州',toCity:'长沙',routePrice:98.0},
        {formCity:'广州',toCity:'昆明',routePrice:229.0},
        {formCity:'广州',toCity:'合肥',routePrice:192.0},
        {formCity:'广州',toCity:'福州',routePrice:345.0},
        {formCity:'广州',toCity:'苏州',routePrice:213.0},
        {formCity:'广州',toCity:'西安',routePrice:224.0},
        {formCity:'广州',toCity:'太原',routePrice:268.5},
        {formCity:'广州',toCity:'天津',routePrice:251.0},
        {formCity:'广州',toCity:'杭州',routePrice:173.5},

         {formCity:'深圳',toCity:'济南',routePrice:229.0},
        {formCity:'深圳',toCity:'苏州',routePrice:260.0},
        {formCity:'深圳',toCity:'上海',routePrice:234.0},
        {formCity:'深圳',toCity:'郑州',routePrice:201.0},
        {formCity:'深圳',toCity:'天津',routePrice:254.5},
        {formCity:'深圳',toCity:'杭州',routePrice:219.5},
        {formCity:'深圳',toCity:'福州',routePrice:383.0},
        {formCity:'深圳',toCity:'西安',routePrice:236.0},
        {formCity:'深圳',toCity:'昆明',routePrice:206.0},
        {formCity:'深圳',toCity:'南京',routePrice:234.5},
        {formCity:'深圳',toCity:'南宁',routePrice:124.0},
        {formCity:'深圳',toCity:'广州',routePrice:21.5},

        {formCity:'成都',toCity:'济南',routePrice:251.0},
        {formCity:'成都',toCity:'上海',routePrice:259.0},
        {formCity:'成都',toCity:'合肥',routePrice:208.0},
        {formCity:'成都',toCity:'厦门',routePrice:1045.0},
        {formCity:'成都',toCity:'昆明',routePrice:481.5},
        {formCity:'成都',toCity:'南宁',routePrice:180.5},
        {formCity:'成都',toCity:'福州',routePrice:254.5},
        {formCity:'成都',toCity:'杭州',routePrice:236.5},
        {formCity:'成都',toCity:'广州',routePrice:206.0},
        {formCity:'成都',toCity:'苏州',routePrice:252.0},
        {formCity:'成都',toCity:'深圳',routePrice:251.0},
        {formCity:'成都',toCity:'郑州',routePrice:168.5}
      ],
      //城市旅游线路---默认显示
      cityRoute:[
        {formCity:'北京',toCity:'南宁',routePrice:268.5},
        {formCity:'北京',toCity:'广州',routePrice:251.0},
        {formCity:'北京',toCity:'厦门',routePrice:243.0},
        {formCity:'北京',toCity:'上海',routePrice:156.5},
        {formCity:'北京',toCity:'杭州',routePrice:189.5},
        {formCity:'北京',toCity:'武汉',routePrice:152.5},
        {formCity:'北京',toCity:'长沙',routePrice:189.5},
        {formCity:'北京',toCity:'合肥',routePrice:138.5},
        {formCity:'北京',toCity:'东莞',routePrice:251.0},
        {formCity:'北京',toCity:'深圳',routePrice:254.5},
        {formCity:'北京',toCity:'昆明',routePrice:302.5},
        {formCity:'北京',toCity:'南京',routePrice:130.5}

      ],
      // 热门推荐城市tab选择
      cityRouteTabs:[
        {city:'北京',name:'beijing'},
        {city:'上海',name:'shanghai'},
        {city:'广州',name:'guangzhou'},
        {city:'深圳',name:'shengzheng'},
        {city:'成都',name:'chengdu'}
      ],
        // 出发日期事件
      pickerOptions: {
      
          disabledDate(time) {
            return time.getTime() > Date.now();
          },
          shortcuts: [{
            text: '今天',
            onClick(picker) {
              picker.$emit('pick', new Date());
            }
          }, {
            text: '昨天',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24);
              picker.$emit('pick', date);
            }
          }, {
            text: '一周前',
            onClick(picker) {
              const date = new Date();
              date.setTime(date.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit('pick', date);
            }
          }]
        },
        //火车票查询 表单
        Trainform:{
          formStation:'',
          toStation:'',
          formDate:'',
          checked:false
        },
        // 热门线路
        hotRoute:'beijing',
        // 验证
        rules:{
          formStation:[
            {required: true, message: '请输入出发城市', trigger: 'blur'},
            
          ],
          toStation:[
             {required: true, message: '请输入到达城市', trigger: 'blur'}
          ],
          formDate:[
            { type: 'date', required: true, message: '请选择出发日期', trigger: 'change' }
          ]
        }
    }
  },
  methods:{
    submitForm(Trainform){
       this.$refs[Trainform].validate((valid) => {
          if (valid) {
            alert('submit!');
          } else {
            console.log('error submit!!');
            return false;
          }
        });
    },
     hotRouteClick(tab, event) {
        console.log(tab, event);
            // 获取路线
          let citys=this.cityRoutes
            console.log(citys)
            // 过滤选择路线
          let Filtercitys = citys.filter((item)=>{
            console.log(tab.label)
              return item.formCity == tab.label;
              
          })
          this.cityRoute=Filtercitys
          console.log(Filtercitys)
        
      }
  }
}
</script>

<style scoped >

#index-box{
  width: 1500px;
  margin: 0 auto;
   background-color: #E9EEF3; 
}
 .el-header, .el-footer {
    background-color: #B3C0D1;
    color: #333;
    line-height: 60px;
  }
  .el-aside {
    background-color: #fff;
    color: #333;
    width: 480px;
  height: 350px;
    margin-top: 20px;
  margin-left: 10px;
  
  }
    .el-main {
    background-color: #E9EEF3;
    color: #333;

    line-height: 80px;
  }
  .infos {
    width: 560px;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
    color: white;
    font-size: 18px;
}
/*时间*/
.icon-note {
    width: 9px;
    height: 14px;
    display: inline-block;
    vertical-align: text-top;
    background: url;
    margin-top:3px;
    margin-right:8px;margin-left:3px
}
/*火车票订单*/
.order-train {
    /* color: #005ea7; */
    position: relative;
    float: right;
    

}
/* 广告图片轮播 */
.el-carousel__item h3 {
    color: #475669;
    font-size: 18px;
    opacity: 0.75;
    line-height: 300px;
    margin: 0;
  }
  .image{
    width: 100%;height: 350px;;
  }
  .el-carousel__item:nth-child(2n) {
    background-color: #ffffff;
  }
  
  .el-carousel__item:nth-child(2n+1) {
    background-color: #ffffff;
  }
/* .train_choose{
  width: 480px;
  height: 350px;
  margin-top: 20px;
  margin-left: 10px;
  border:1px solid gray;
  background-color: #d3dce6
} */
/* 火车图标 */
.smt{
  border-bottom: 1px solid #e7e7e7;
}
.icon-train{
 display: inline-block;
            width: 32px;
            height: 20px;
            background: url('/static/images/train-logo.png');
            vertical-align: middle;
            margin-right: 9px;
            margin-left: 20px;
}
/* 换icon */
 .el-aside .line-zs{
  position: relative;
    top: 32px;
    width: 30px;
    height: 40px;
    border: 1px solid #e7e7e7 ;
    border-left: 0;
    right: 80px;
    float: right;
    
}
.icon-huan{
  width: 40px;
  height: 40px;
  position: relative;
  float: right;
  right: 10px;
  top: 30px;

}
/* 搜索按钮 */
.el-button {
margin-left: 46px;
}

/* 热门推荐icon,常见问题 */
.rmtj,.cjwt {
  font-size: 30px;
}
.rmtj .icon-remen,.cjwt .icon-changjianwenti{
  width: 60px;
  height: 60px;
  color: red;
  font-size: 30px;
}
/* 热门推荐线路 */
.el-tabs{
margin-top: -20px;
}
.hot-stations {
margin-left:45px;
}
.hot-stations li{
  width: 167px;
    height: 77px;
    border: 1px solid #e5e5e5;
    background: #fff;
    border-radius: 4px;
    float: left;
    margin: 10px 10px 10px 30px;
    cursor: pointer;
    text-align: center;
    list-style: none;
}
.hot-stations li:hover {
        border:1px solid  #2ebdff
    }
        /*站台名称*/
 .hot-stations li .station-name {
    font-size: 14px;
    color: #222;
    line-height: 20px;
    margin: 10px 0 9px;
}
 /*箭头*/
 .hot-stations li .station-name .icon-ttk_index_pointerx1 {
    font-size: 27px;
    color: #d8d8d8;
    margin: 0 8px;
    vertical-align: sub;
    display: inline-block;
}
.icon-ttk_index_pointerx1:before {
    content: "—";
    box-sizing: border-box;
    margin: 0;
    box-sizing: inherit;
}
.iconfont {
    font-family: iconfont !important;
    font-size: 16px;
    font-style: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

}
/*线路价钱*/
 .hot-stations li .station-price {
    line-height: 25px;
    color: #f90;
    font-size: 12px;
    font-weight: 700;
}
            /*常见问题内容部分*/
    .issue-content {
        margin-top: 20px;
        overflow: hidden;
        
    }
.issue-content ul {
            zoom: 1;margin-left:5px;
        }
 .issue-content .single-issue {
            float: left;
            display: inline;
            width: 320px;
            height: 200px;
            background: #f0f8ff;
            border: 1px dashed #2ebdff;
            position: relative;
            zoom: 1;
            margin-left: 14px;
            line-height: 25px;
        }
        /*标题*/
  .issue-content .single-issue .issue-title {
                font-size: 18px;
                color: #52555b;
                font-weight: 400;
                margin: 15px 0 0 25px;
            }
            /*详情*/
  .issue-content .single-issue .issue-detail {
                color: #84898d;
                width: 238px;
                height: 50px;
                margin: 15px auto;
                font-size:13px;
            }
            /*更多*/
.issue-content .single-issue .more-issue {
                position: absolute;
                font-size: 12px;
                color: #8b867e;
                bottom: 10px;
                right: 25px;
            }
</style>
